<template>
  <el-header class="navbar">
    <div class="logo">
      <!-- <img :src="../images/LOGO.png" alt="Logo" class="logo-img" /> -->
      <span class="logo-text">易手网后台管理系统</span>
    </div>
    <div class="header-right">
      <input type="file" accept="image/*" @change="handleFileChange" class="file-input" />
      <img v-if="avatarUrl" :src="avatarUrl" class="avatar" alt="Avatar" />
      <div v-else class="avatar-placeholder">头像</div>
      <div class="name">张思</div>
      <el-dropdown trigger="click" @command="handleCommand">
        <el-button link>
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="profile">个人资料</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { ref } from 'vue';
import { ElHeader, ElDropdown, ElButton, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { useRouter } from 'vue-router';

const avatarUrl = ref(null);
const logoSrc = '/path/to/your/logo.png'; // 替换为您的 logo 图片的实际路径
const router = useRouter();

const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      avatarUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

const handleCommand = (command) => {
  switch (command) {
    case 'profile':
    router.push('/ProfilePage');
      break;
    case 'logout':
    router.push('/LoginPage');
      break;
    default:
      console.log(`Unknown command: ${command}`);
  }
};
</script>

<style scoped>
.navbar {
  background-color: #00274d; /* Deep blue background to match the sidebar */
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px; /* Adjust height as needed */
  line-height: 60px; /* Center text vertically */
  width: 100%; /* Ensure it takes the full width of the parent */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}

.logo {
  display: flex; /* Use flex for aligning logo and text */
  align-items: center; /* Vertically center logo and text */
  gap: 10px; /* Add some spacing between logo and text */
}

.logo-img {
  width: 40px; /* Adjust size as needed */
  height: 40px; /* Adjust size as needed */
}

.logo-text {
  font-size: 18px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px; /* Add some spacing between elements */
  margin-left: auto; /* Push to the right */
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 40px;
  height: 40px;
  background-color: #ddd;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.name {
  font-size: 16px;
  margin-left: 10px;
}

.file-input {
  display: none; /* Hide the file input */
}
</style>